<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/edit.css" />
    <script src="js/url_handler.js"></script>
    <!-- 引入jQuery依赖 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <!-- 引入editor.md的依赖，路径不同，写法不同 -->
    <!-- 一个css 三个js -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <link rel="icon" href="img/logo1.png" type="image/x-icon" />
    <title>写文章</title>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="img/logo1.png" />
      <div class="title">我的博客系统</div>

      <div class="space"></div>
      <a href="blog_lists.html">主页</a>
      <a href="myblog_lists.html">我的博客</a>
      <a href="blog_login.html">退出登录</a>
    </div>
    <div class="blog-edit-container">
      <!-- 标题编辑区 -->
      <div id="form">
        <div class="title">
          <input type="text" id="text" />
          <input type="text" id="summary" style="display: none" />
          <input type="button" id="submit" value="提交" onclick="update()" />
        </div>
        <!-- 创建一个id为editor的div id！-->
        <div id="editor">
          <textarea id="content" style="display: none"></textarea>
        </div>
      </div>
    </div>
    <script>
      var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/",
        saveHTMLToTextarea: true,
      });
      var aid = getParamValue("aid");
      // 1. 校验参数
      function init() {
        jQuery("#text").val("【Lorem】");
        jQuery("#content").val(
          "# Lorem\n" +
            "```java\n" +
            'System.out.println("Lorem\\n");\n' +
            "```\n" +
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ipsa, eaque animi laudantium obcaecati adipisci rem quis mollitia iusto natus, voluptate autem nihil illum. Cupiditate deleniti molestiae sequi quibusdam?\n" +
            "> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ipsa, eaque animi laudantium obcaecati adipisci rem quis mollitia iusto natus, voluptate autem nihil illum. Cupiditate deleniti molestiae sequi quibusdam?"
        );
        jQuery("#summary").val("lorem");
      }
      init();
      function update() {
        var title = jQuery("#text");
        var content = jQuery("#content");
        // 1. 参数校验
        if (title.val().trim() == "") {
          alert("标题不能为空！");
          title.focus();
          return false;
        }
        if (content.val().trim() == "") {
          alert("正文不能为空！");
          content.focus();
          return false;
        }
        // 2. 输入摘要
        var summary = prompt("请输入摘要：", jQuery("#summary").val());
        if (summary.trim() == "") {
          alert("摘要不能为空！");
          return false;
        }
        jQuery("#summary").val(summary);
        // 3. 发送请求
        location.href = "myblog_lists.html";
      }
    </script>
  </body>
</html>
